<template >
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>商品列表</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 卡片视图>栅格系统包含搜索 -->
		<el-card class="box-card">
			<el-button type="primary" @click="addCateDialogShow">添加商品</el-button>

			<!-- 表格 -->
			<tree-table
				:data="cateList"
				:columns="columns"
				:selection-type="false"
				:expand-type="false"
				show-index
				index-text="#"
				border
				class="treeTable"
			>
				<template slot="isOk" slot-scope="scope">
					<i class="el-icon-success" v-if="scope.row.cat_deleted===false" style="color:green"></i>
					<i class="el-icon-error" v-else style="color:red"></i>
				</template>
				<template slot="order" slot-scope="scope">
					<el-tag size="mini" v-if="scope.row.cat_level==0">一级</el-tag>
					<el-tag size="mini" v-else-if="scope.row.cat_level==1" type="success">二级</el-tag>
					<el-tag size="mini" v-else type="warning">三级</el-tag>
				</template>
				<template slot="operate" slot-scope="scope">
					<el-button size="mini" type="primary" icon="el-icon-edit" @click="editCateName(scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" icon="el-icon-edit" @click="deleteCate(scope.row)">删除</el-button>
				</template>
			</tree-table>

			<!-- 分页部分 -->
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="queryInfo.pagenum"
				:page-sizes="[2, 4, 5, 10]"
				:page-size="queryInfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			></el-pagination>

			<!-- 添加类对话框 -->
			<el-dialog
				title="添加类"
				:visible.sync="addCateDialogVisible"
				width="50%"
				@close="resetAddCateForm"
			>
				<!-- 主题内容 -->
				<el-form
					:model="addCateForm"
					:rules="addCateFormRules"
					ref="addCateFormRef"
					label-width="80px"
					class="demo-ruleForm"
				>
					<el-form-item label="分类名称" prop="cat_name">
						<el-input v-model="addCateForm.cat_name"></el-input>
					</el-form-item>
					<el-form-item label="父级分类">
						<el-cascader
							v-model="selectKeys"
							:options="parentCateList"
							:props="cascaderProps"
							clearable
							@change="parentCateChanged"
						></el-cascader>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="addCateDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="addCate">确 定</el-button>
				</span>
			</el-dialog>

			<!-- 编辑类名对话框 -->
			<el-dialog
				title="编辑类名"
				:visible.sync="editCateNameDialogVisible"
				width="50%"
				@close="newName = ''"
			>
				<p>原类名 : {{editName.oldName}}</p>
				<p>
					新类名 :
					<el-input v-model="newName"></el-input>
				</p>
				<span slot="footer" class="dialog-footer">
					<el-button @click="editCateNameDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="editCate">确 定</el-button>
				</span>
			</el-dialog>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				queryInfo: {
					type: 3,
					pagenum: 1,
					pagesize: 5
				},
				cateList: [],
				total: 0,
				columns: [
					{
						label: "分类名称",
						prop: "cat_name"
					},
					{
						label: "是否有效",
						type: "template", //  表示将当前列定义为模板列
						template: "isOk" // 表示当前这一列使用的模板名称
					},
					{
						label: "排序",
						type: "template", //  表示将当前列定义为模板列
						template: "order" // 表示当前这一列使用的模板名称
					},
					{
						label: "操作",
						type: "template", //  表示将当前列定义为模板列
						template: "operate" // 表示当前这一列使用的模板名称
					}
				],
				addCateDialogVisible: false,
				addCateForm: {
					// 其父级分类的id
					cat_pid: 0,
					// 将要添加的分类的名称
					cat_name: "",
					// 分类的等级,默认要添加的是1级分类
					cat_level: 0
				},
				addCateFormRules: {
					cat_name: [{ required: true, message: "请输入用户名", trigger: "blur" }]
				},
				parentCateList: [],
				selectKeys: [],
				cascaderProps: {
					value: "cat_id",
					label: "cat_name",
					children: "children",
					checkStrictly: true,
					expandTrigger: "hover"
				},
				editCateNameDialogVisible: false,
				newName: "",
				editName: {
					oldName: "",
					cateId: 0
				}
			};
		},
		created() {
			this.getCateList();
		},
		methods: {
			async getCateList() {
				let { data: res } = await this.$http.get("categories", {
					params: this.queryInfo
				});
				// console.log(res.data.result);
				this.cateList = res.data.result;
				// console.log(res.data);
				this.total = res.data.total;
			},
			handleSizeChange(val) {
				this.queryInfo.pagesize = val;
				this.getCateList();
			},
			handleCurrentChange(val) {
				this.queryInfo.pagenum = val;
				this.getCateList();
			},
			addCateDialogShow() {
				this.getParentCate();
				this.addCateDialogVisible = true;
			},
			async getParentCate() {
				let { data: res } = await this.$http.get("categories", {
					params: { type: 2 }
				});
				// console.log(res);
				this.parentCateList = res.data;
			},

			// 当选择项发生变化是触发这个函数
			parentCateChanged() {
				// console.log(this.selectKeys);
				// 如果selectedKeys数组中国的length大于0,证明选中了父级分类
				// 反之, 就说明没有选中任何父级分类
				if (this.selectKeys.length > 0) {
					// 父级分类的id
					this.addCateForm.cat_pid = this.selectKeys[this.selectKeys.length - 1];
					// console.log(this.addCateForm.cat_pid);
					// 为当前分类的等级赋值
					this.addCateForm.cat_level = this.selectKeys.length;
					return;
				} else {
					this.addCateForm.cat_pid = 0;
					this.addCateForm.cat_level = 0;
				}
			},
			addCate() {
				//提交参数赋值
				// this.parentCateChanged();
				// console.log(this.addCateForm);
				this.$refs.addCateFormRef.validate(async valid => {
					// console.log(valid);
					if (!valid) return this.$message.error("请输入有效类名");
					let { data: res } = await this.$http.post(
						"categories",
						this.addCateForm
						// this.addCateForm
					);
					// console.log(res);
					if (res.meta.status !== 201) return this.$message.error("添加类名失败");
					this.$message.success("添加类名成功");
					this.getCateList();
					this.addCateDialogVisible = false;
				});
			},
			resetAddCateForm() {
				this.$refs.addCateFormRef.resetFields();
				this.addCateForm.cat_pid = 0;
				this.addCateForm.cat_level = 0;
				this.selectKeys = [];
			},
			editCateName(val) {
				// console.log(val);当前行的信息
				this.editName.oldName = val.cat_name;
				this.editName.cateId = val.cat_id;
				// console.log(this.editName.cateId);

				this.editCateNameDialogVisible = true;
			},
			async editCate() {
				let { data: res } = await this.$http.put(
					"categories/" + this.editName.cateId,
					{
						id: this.editName.cateId,
						cat_name: this.newName
					}
				);
				// console.log(res);
				if (res.meta.status !== 200) return this.$message.error("更新类名失败");
				this.$message.success("更新类名成功");
				this.getCateList();
				this.editCateNameDialogVisible = false;
			},
			async deleteCate(val) {
				let result = await this.$confirm(
					"此操作将永久删除该文件, 是否继续?",
					"提示",
					{
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					}
				).catch(err => err);
				// console.log(result);
				// console.log(val);
				if (result == "cancel") return this.$message.success("取消删除");
				let { data: res } = await this.$http.delete("categories/" + val.cat_id);
				// console.log(res);
				if (res.meta.status !== 200) return this.$message.error("删除失败");
				this.$message.success("删除成功");
				this.getCateList();
			}
		}
	};
</script>

<style lang="less" scoped>
	.treeTable {
		margin: 20px 0;
	}
	.el-cascader {
		width: 100%;
	}
</style>
